import { Button, Modal, Form, Input, message, Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { changeInfo, uploadAvatar } from '../../api/user';
import { useAuth, avatarBaseUrl } from '../../context/AuthProvider';
// 布局结构
// 封装发布投稿的请求函数
// 交互(确定发布的事件)

const ChangeInfo = () => {
    const { user, setUser } = useAuth();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [avatar, setAvatar] = useState(user.avatar);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const onFinish = (values) => {
        changeInfo({ ...values, avatar, userId: user.userId })
            .then(res => {
                setUser(res.data);
                setIsModalOpen(false);
                message.success('修改成功')
            })
            .finally(() => {

            })
    }
    const change = (e) => {
        const avatarData = new FormData()
        avatarData.append('file', e.target.files[0]);
        uploadAvatar(avatarData)
            .then(res => {
                console.log(res);
                setAvatar(res.data)
            })
    }
    return (
        <>
            <span onClick={showModal}>
                个人信息
            </span>
            <Modal
                title="个人信息"
                open={isModalOpen}
                footer={null}
                onCancel={handleCancel}
            >
                <Form
                    name="basic"
                    layout='vertical'
                    // style={{ width: 400, margin: '50px auto' }}
                    onFinish={onFinish}
                    autoComplete="off"
                    initialValues={user}
                >
                    <input onChange={change} style={{ display: 'none' }} id='avatar' type="file" />
                    <label htmlFor="avatar">
                        <Avatar src={avatarBaseUrl + avatar} size={40} icon={<UserOutlined />} />
                    </label>
                    <Form.Item
                        label="用户名"
                        name="userName"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        label="昵称"
                        name="nickName"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="签名"
                        name="userSignature"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item>
                        <Button
                            block
                            shape='round'
                            type="primary"
                            htmlType="submit"
                        >
                            新增投稿
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
};
export default ChangeInfo;